<!-- 我的地块 -->
<template>
	<view>
		<uni-nav-bar title="我的地块" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<view class="tabControl" v-show="checkLessee">
			<view class="tab">
				<u-tabs :list="tabList" @click="selectTab" activeStyle='color: #0480FB'></u-tabs>
				<view class="line"></view>
			</view>
		</view>
		<view class="main">
			<scroll-view class="scrollheight" scroll-y="true"
				:style="{height: checkLessee ? setcollapseheight() + 'px' : setcollapseheight() - 80 + 'px'}"
				@scrolltolower="handleScrolltolowerone()">
				<view v-for="item in arableList" :key="item.facilityNo" class="item">
					<view class="left" @click="goOrganization(item)">
						<view class="name">
							地块名称：{{item.facilityName}}
						</view>
						<view class="number">
							地块编号：{{item.facilityNo}}
						</view>
						<view class="provice" v-if="item.regionStr">
							省市区：{{item.regionStr }}
						</view>
						<!-- <view class="provice" v-else>
							省市区：{{addressList.filter(el=>el.provinceId === item.provinceId)[0].name}}
							{{addressList.filter(el=>el.provinceId === item.provinceId)[0].city.filter(el1=>item.cityId === el1.cityId)[0].name}}
							{{addressList.filter(el => el.provinceId === item.provinceId)[0].city.filter(el1 => el1.cityId === item.cityId)[0].area.filter(el2=>el2.areaId === item.areaId)[0].name}}
						</view> -->
						<div class="address">
							详细地址：{{item.address}}
						</div>
					</view>
					<view class="right" v-show="tabIndex === '个人'">
						<u-icon name="edit-pen" :size="36" @click="addorset('编辑地块',item)"></u-icon>
					</view>
				</view>
				<view class="bottom-ios-lineline">

				</view>
				<view class="bottom-ios-line">

				</view>
			</scroll-view>

			<u-button type="primary" class="btn" shape="circle" text="新增地块" @click="addorset('新增地块')" v-show="tabIndex === '个人'"></u-button>

		</view>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/subPage1/plugins/address.js'
	import API from '@/api/socialized-servce/farm-service/normalUser/my-arable'
	import agrAPI from '@/api/socialized-servce/agricultural-information/index.js'
	export default {
		data() {
			return {
				page: 1,
				total: 0,
				totalPages: 0,
				loading: false,
				arableList: [],
				tabList: [{
						name: '个人',
						id: 1
					},
					{
						name: '租户',
						id: 2
					}
				],
				checkLessee: false,
				tabIndex: '个人',
				addressList: addressList
			}
		},
		mounted() {
			let userInfo = JSON.parse(uni.getStorageSync('userServerInfo'))
			this.checkLessee = userInfo.checkLessee
			this.setcollapseheight()
			this.getMyarable()
		},
		methods: {
			selectTab(e) {
				this.page = 1
				this.tabIndex = e.name
				this.loading = false
				this.arableList = []
				this.getMyarable()
			},
			// 分页查询
			async getMyarable() {
				if (this.loading) return
				this.loading = true
				let params = {
					page: this.page,
					size: 10,
				}
				if (this.tabIndex === '个人') {
					let res = await API.queryMyarable(params)
					if (res.code === 200) {
						this.total = res.data.totalElements
						this.totalPages = res.data.totalPages
						let newList = res.data.content
						if(this.page === 1) {
							this.arableList = newList
						} else {
							this.arableList = [...this.arableList,...newList]
						}
						
						this.arableList = res.data.content
						this.loading = false
					} else {
						this.loading = true
					}
				} else {
					let res = await agrAPI.queryMyarable(params)
					if (res.code === 1) {
						this.total = res.data.totalElements
						this.totalPages = res.data.totalPages
						let newList = res.data.content
						if(this.page === 1) {
							this.arableList = newList
						} else {
							this.arableList = [...this.arableList,...newList]
						}
						this.loading = false
					} else {
						this.loading = true
					}
				}
			},
			// 触底
			async handleScrolltolowerone() {
				if(this.loading)return;
				// console.log('触底', this.totalPages,'page',this.page,this.tabIndex);
				if (this.page <= this.totalPages && this.page*10 < this.total) {
					this.page++
					this.getMyarable()
				}
			},
			addorset(title, item) {
				uni.setStorageSync('editArableItem', item)
				uni.redirectTo({
					url: `/subPage1/socialized-service/farm-service/normalUser/set-arable/set-arable?title=${title}`
				})
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});

				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/serviceClassify'
				})
			},
			goOrganization(e) {
				uni.setStorageSync('myarableInfo', e)
				uni.redirectTo({
					url: `/subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/service-organization`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 选项卡
	.tabControl {
		width: 100%;
		top: 136rpx;
		z-index: 99999;
		background-color: #F5F6FA;

		.tab {
			position: relative;

			.line {
				position: absolute;
				bottom: -2rpx;
				width: 100%;
				border-bottom: 2rpx solid #C9E4FF;
				z-index: 6;
			}
		}

		::v-deep .u-tabs__wrapper__nav__item {
			width: 45%;
		}

		::v-deep .u-tabs__wrapper__nav__line {
			position: absolute;
			z-index: 9999 !important;
			height: 2rpx !important;
			width: 25% !important;
			bottom: 0 !important;
			background-color: #0e7ae9 !important;
			left: -10%;
		}
	}

	.main {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
		background: #F5F6FA;

		.item {
			display: flex;
			box-sizing: border-box;
			min-height: 220rpx;
			padding: 30rpx;
			margin: 0 40rpx;
			margin-bottom: 18rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.05);
			border-radius: 5px 5px 5px 5px;

			.left {
				width: calc(100% - 20px);
				height: 100%;

				.name {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #91743E;
				}

				.number,
				.provice,
				.address {
					margin-top: 10rpx;
					display: flex;
					width: 100%;
				}
			}

			.right {
				display: flex;
				padding: 0 20rpx;
				justify-content: center;
				align-items: center;
			}
		}

		.btn {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 60rpx;
			width: 90%;
			background: linear-gradient(135deg, #b5d7ff, #0752fd);
			border: 0;
			font-weight: 600;
		}
	}
</style>